import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Button, Text, Image } from "@tarojs/components-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime } from "../../utils/common";
import set_passwordStyleSheet from "./set_password_styles";
import eye from "../../assets/img/icon_01.png";
import eye_on from "../../assets/img/icon_01_on.png";
var _styleSheet = set_passwordStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let ForgetPassword = class ForgetPassword extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oldEye: false,
      currentEye: false,
      currentCenterEye: false,
      oldImg: eye,
      currentImg: eye,
      currentCenterImg: eye,
      focus: 'oldPassword',
      oldPassword: null,
      password: null,
      passwordCenter: null,
      isComplete: true,
      oldType: 'password',
      currentType: 'password',
      currentCenterType: 'password'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '密码修改' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  // input聚焦
  inputFocus(type = 'password') {
    this.setState({
      focus: type
    });
  }
  toggleEye(type) {
    this.setState({
      [type]: !this.state[type]
    }, () => {
      let eyeImg = this.state[type] ? eye_on : eye;
      let passwordType = this.state[type] ? 'text' : 'password';
      this.setState({
        [type + 'Img']: eyeImg,
        [type + 'Type']: passwordType
      });
    });
  }
  inputChange(type, e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { oldPassword, password, passwordCenter } = this.state;
      if (oldPassword && password && passwordCenter) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  formSubmit() {
    let { oldPassword, password, passwordCenter } = this.state;
    if (!oldPassword) {
      getRuntime().showToast('请填写旧密码~');
      return false;
    }
    if (!password) {
      getRuntime().showToast('请填写密码~');
      return false;
    }
    if (password !== passwordCenter) {
      getRuntime().showToast('两次输入密码不一致~');
      return false;
    }
    let { userStore } = this.props.stores;
    userStore.updateUserPassword({
      form: {
        oldPassword,
        newPassword: password
      },
      callback: () => {
        getRuntime().showToast('修改密码成功~');
      }
    });
  }
  render() {
    let { focus, oldImg, currentImg, currentCenterImg, oldType, currentType, currentCenterType, isComplete } = this.state;
    return <View style={_styleSheet["login-wrap"]}>
       <View>
         <View style={_getStyle(focus === 'oldPassword' ? 'input-group input-group-on' : 'input-group')}>
           <Text style={_styleSheet["input-title"]}>原密码</Text>
           <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={oldType} name="oldPassword" onFocus={this.inputFocus.bind(this, 'oldPassword')} onChange={this.inputChange.bind(this, 'oldPassword')} style={_styleSheet["input"]} />
           <Image src={oldImg} onClick={this.toggleEye.bind(this, 'old')} style={_styleSheet["eye"]} />
         </View>

         <View style={_getStyle(focus === 'password' ? 'input-group input-group-on' : 'input-group')}>
           <Text style={_styleSheet["input-title"]}>新密码</Text>
           <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={currentType} name="oldPassword" onFocus={this.inputFocus.bind(this, 'password')} onChange={this.inputChange.bind(this, 'password')} style={_styleSheet["input"]} />
           <Image src={currentImg} onClick={this.toggleEye.bind(this, 'current')} style={_styleSheet["eye"]} />
         </View>

         <View style={_getStyle(focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group')}>
           <Text style={_styleSheet["input-title"]}>确认新密码</Text>
           <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={currentCenterType} name="oldPassword" onFocus={this.inputFocus.bind(this, 'passwordCenter')} onChange={this.inputChange.bind(this, 'passwordCenter')} style={_styleSheet["input"]} />
           <Image src={currentCenterImg} onClick={this.toggleEye.bind(this, 'currentCenter')} style={_styleSheet["eye"]} />
         </View>

         <Button type="primary" onClick={this.formSubmit.bind(this)} disabled={isComplete} style={_getStyle(isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on')}>确定修改</Button>

         <View onClick={this.handelRouter.bind(this, '/pages/login/forget_password')} style={_styleSheet["back-login"]}>其他方式</View>
       </View>

      </View>;
  }
};
ForgetPassword = tslib_1.__decorate([inject("stores"), observer], ForgetPassword);
export default ForgetPassword;